<template>
  <view class="container">
    <!-- 第一块：订单头部信息 -->
    <view class="order-header">
      <view class="header-left">
        <view class="shop-name">{{ shopName || "加载中..." }}</view>
        <view class="product-info">商品</view>
      </view>
      <view class="header-right">
        <view class="order-status" :class="'status-' + order.status">
          {{ order.status_title || getOrderStatusText(order.status) }}
        </view>
      </view>
    </view>

    <view class="order-section">
      <view class="order-title">您的订单</view>
    </view>

    <!-- 第二块：订单商品信息 -->
    <view class="product-section">
      <view
        class="product-item"
        v-for="(detail, index) in order.detail"
        :key="index"
      >
        <view class="product-image-container">
          <image
            class="product-image"
            :src="getProductImage(detail.product.img)"
            mode="aspectFill"
            v-if="getProductImage(detail.product.img)"
          ></image>
          <view class="product-image-placeholder" v-else></view>
        </view>
        <view class="product-info">
          <view class="product-name">{{ detail.product.title }}</view>
          <view class="product-spec">{{
            detail.product.desc || "默认规格"
          }}</view>
          <view class="product-price-quantity">
            <view class="product-price">¥{{ detail.price }}</view>
            <view class="product-quantity">x{{ detail.num }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 第三块：订单详细信息 -->
    <view class="order-details">
      <view class="detail-item">
        <text class="label">订单号：</text>
        <text class="value">{{ order.code }}</text>
      </view>
      <view class="detail-item">
        <text class="label">总数：</text>
        <text class="value">x {{ getTotalQuantity() }}</text>
      </view>
      <view class="detail-item">
        <text class="label">总价：</text>
        <text class="value price">¥{{ order.money }}</text>
      </view>
      <view class="detail-item">
        <text class="label">下单时间：</text>
        <text class="value">{{ order.createtime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../static/config.js';

export default {
  data() {
    return {
      orderId: "",
      order: {
        detail: [],
      },
      shopName: "",
      baseURL: config.baseURL,
    };
  },

  onLoad(options) {
    this.orderId = options.id;
    // 从订单页面传递的数据中获取订单详情
    const orderData = uni.getStorageSync("currentOrder");
    if (orderData && orderData.id == this.orderId) {
      this.order = orderData;
      this.fetchShopName();
    } else {
      // 如果没有传递数据，可以调用接口获取订单详情
      // 这里暂时使用默认数据
      this.loadOrderDetail();
    }
  },

  methods: {
    // 获取店铺名称
    fetchShopName() {
      if (!this.order.detail || this.order.detail.length === 0) return;

      const shopId = this.order.detail[0].product.foodshop_id;
      if (!shopId) {
        this.shopName = "默认店铺";
        return;
      }

      // 使用统一封装的接口
      const { foodAPI } = require('../../static/indexAPI.js');
      foodAPI.getShopDetail({id: shopId}).then((res) => {
        if (res.statusCode === 200 && res.data && res.data.code === 1) {
          this.shopName = res.data.data.title || "未知店铺";
        } else {
          this.shopName = "未知店铺";
        }
      }).catch((err) => {
        console.error("获取店铺详情失败:", err);
        this.shopName = "未知店铺";
      });
    },

    // 添加 getTotalQuantity 方法
    getTotalQuantity() {
      if (!this.order.detail || !Array.isArray(this.order.detail)) return 0;
      return this.order.detail.reduce((total, item) => total + (item.num || 0), 0);
    },

    // 获取订单状态文本
    getOrderStatusText(status) {
      const statusMap = {
        1: "待付款",
        2: "待使用",
        3: "已使用",
        4: "已取消",
      };
      return statusMap[status] || "未知状态";
    },

    // 获取商品图片完整URL
    getProductImage(imageUrl) {
      // 如果没有图片，返回空字符串，使用默认占位符
      if (!imageUrl) return "";

      // 如果已经是完整URL，直接返回
      if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
        return imageUrl;
      }

      // 拼接基础URL
      return this.baseURL + imageUrl;
    },

    // 加载订单详情
    loadOrderDetail() {
      // 这里应该调用实际的订单详情接口
      // 暂时使用模拟数据
      this.order = {
        id: this.orderId,
        code: "NO202109010001",
        status: "2",
        status_title: "待核销",
        money: "99.00",
        createtime: "2021-09-01 12:00:00",
        detail: [
          {
            product: {
              title: "招牌牛肉面",
              img: "",
              desc: "大份",
              foodshop_id: 22,
            },
            price: "59.00",
            num: 1,
          },
          {
            product: {
              title: "红烧排骨饭",
              img: "",
              desc: "中份",
              foodshop_id: 22,
            },
            price: "40.00",
            num: 1,
          },
        ],
      };
      this.fetchShopName();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
//   padding: 10px;
}

/* 第一块：订单头部信息 */
.order-header {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.header-left .shop-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.header-left .product-info {
  font-size: 13px;
  color: #999;
}

.header-right .order-status {
  font-size: 14px;
  font-weight: bold;
}

.order-status.status-1 {
  color: red;
}

.order-status.status-2 {
  color: #1aad19;
}

.order-status.status-3 {
  color: #999;
}

.order-status.status-4 {
  color: #ccc;
}

.order-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}

/* 第二块：订单商品信息 */
.product-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.product-item {
  display: flex;
  margin-bottom: 15px;
}

.product-item:last-child {
  margin-bottom: 0;
}

.product-image-container {
  width: 26%;
  margin-right: 10px;
}

.product-image {
  width: 100%;
  height: 75px;
  border-radius: 4px;
}

.product-image-placeholder {
  width: 100%;
  height: 75px;
  border-radius: 4px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 60%;
}

.product-name {
  font-size: 15px;
  color: #333;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-spec {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.product-price {
  font-size: 14px;
  color: #ff0000;
  font-weight: bold;
}

.product-quantity {
  font-size: 13px;
  color: #666;
}

/* 第三块：订单详细信息 */
.order-details {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.detail-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}

.value.price {
  color: #ff0000;
  font-weight: bold;
}
</style>
